<template>
  <div>
    <div class="max-div-box">
      <hr>
      <div style="height: auto; overflow: auto;">
        <div style="height: inherit; overflow: hidden auto;">
          <table>
            <tbody style="height: inherit;">
            <tr v-for="(good,index) in goods" v-if="(num-1)*4<=index&&index<num*4">
              <td style="width:20%">
                <img :src="['https://oss.gaojie.cc/'+ good.image]" width="90px" height="90px"/>
              </td>
              <td style="width: 35%;">
                {{ good.title }}
              </td>
              <td style="width: 18%;">
                {{ good.price }}￥
              </td>
              <td style="width: 18%;">
                {{ good.comment }}
              </td>
              <!-- 修改商品图标 -->
              <td>
                <a class="button" href="#/form">
                  <button class="pencil-tarsh-button" tabindex="0" type="button">
                    <i @click="sendGoodsId($event)" class="fa fa-pencil" :name="good.id"></i>
                  </button>
                </a>
              </td>
              <!-- 删除商品图标 -->
              <td>
                <a class="button" href="#/form">
                  <button class="pencil-tarsh-button" tabindex="0" type="button">
                    <i @click="delGoods($event)" :name="good.id" class="fa fa-trash"></i>
                  </button>
                </a>
              </td>

            </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>

    <!--  分页按钮-->
    <div style="width: 480px; height: 100px; margin: 20px auto;">
      <div class="input-num">
        <button @click="sub">上一页</button>
        <span>{{ num }}</span>
        <button @click="add">下一页</button>
      </div>
    </div>
  </div>


</template>

<script>
module.exports = {
  data() {
    return {
      goodsName: '',
      pagenum: 2,
      goods: {},
      num: 1
    };
  },
  mounted: function () {
    axios.get("/goodsblock").then((response) => {
      this.goods = response.data;
    });
  },
  methods: {
    delGoods(event) {
      console.log(event.target.getAttribute('name'));
      axios.get("/goodsdelete", {
        params: {
          goodsId: event.target.getAttribute('name'),
        }
      }).then((response) => {
        // 后端传递给前端的数据在 response.data 中
        if (response.data == "OK") {
          //页面不能跳转
          this.$emit("show-me-goods", 2);
          this.$emit("show-me-goods", 1);
        }
      });
    },
    sub: function () {
      if (this.num > 1) {
        this.num--;
      } else {
        // alert("别点啦,太小啦!");
      }
    },
    add: function () {
      // console.log("add");
      // 累加
      if (this.num < Math.ceil(Object.keys(this.goods).length / 4)) {
        this.num++;
      } else {
        alert("没有更多了!");
      }
    }
  }
}
</script>

<style>
.max-div-box {
  color: rgba(0, 0, 0, 0.87);
  background-color: rgb(255, 255, 255);
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
  border-radius: 2px;
  padding: 30px;
  height: 500px;
}

table {
  background-color: rgb(255, 255, 255);
  padding: 0px 24px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0px;
  table-layout: fixed;
  font-family: Roboto, sans-serif;
}

tr {
  border-bottom: 1px solid rgb(224, 224, 224);
  color: rgba(0, 0, 0, 0.87);
  height: 100px;
}

td {
  cursor: inherit;
}

.pencil-tarsh-button {
  border: 10px;
  box-sizing: border-box;
  display: inline-block;
  font-family: Roboto, sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  outline: none;
  font-size: inherit;
  font-weight: inherit;
  transform: translate(0px, 0px);
  vertical-align: bottom;
  background-color: rgb(238, 238, 238);
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  position: relative;
  height: 40px;
  width: 40px;
  overflow: hidden;
  border-radius: 50%;
  text-align: center;
  fill: rgb(158, 158, 158);
}

hr {
  margin: -1px 0px 0px;
  height: 1px;
  border: none;
  background-color: rgb(224, 224, 224);
}

.input-num {
  margin-top: 31px;
  height: 41%;
  display: flex;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 4px black;
}

.input-num button {
  width: 172px;
  height: 100%;
  font-size: 24px;
  color: gray;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: black;
}

.input-num span {
  height: 50%;
  font-size: 35px;
  flex: 1;
  text-align: center;
  line-height: 47px;
}
</style>